<template>
  <div
    style="position: absolute;top: 0;right: 0;bottom: 0;left: 0"
  >
    <!--收藏的终端的表格-->
    <el-table
      height="100%"
      class="table-gutter-background"
      header-row-class-name="test-table-row-class"
      header-cell-class-name="my-table-header-cell my-table-header-cell-nopadding"
      cell-class-name="my-table-cell"
      :data="data"
    >
      <!--空数据时slot-->
      <div slot="empty">
        <div class="line-height-base">
          <!--暂无收藏-->
          {{ $t('message.home.remoteCuCard.table.emptyText.label1') }}
        </div>
        <div
          class="empty-table-data-div"
          @click="$emit('click-content')"
        >
          <!--点击查看远端站终端列表-->
          {{ $t('message.home.remoteCuCard.table.emptyText.label2') }}
        </div>
      </div>
      <!--终端编号-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.col1')"
        sortable
        prop="device"
        min-width="155px"
      >
        <template slot-scope="scope">
          <span style="margin-left: 5px">
            {{ scope.row.device }}
          </span>
        </template>
      </el-table-column>
      <!--状态名称-->
      <el-table-column
        min-width="150px"
        :label="$t('message.home.remoteDeviceTable.col2')"
        prop="statename"
        :filters="[{ text: $t('message.define.cu.state.0'), value: $t('message.define.cu.state.0') }, { text: $t('message.define.cu.state.1'), value: $t('message.define.cu.state.1') }, { text: $t('message.define.cu.state.2'), value: $t('message.define.cu.state.2') }]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <font-awesome-icon
            :style="{color: scope.row.color}"
            icon="circle"
          />
          <span style="margin-left: 5px">
            {{ scope.row.statename }}
          </span>
        </template>
      </el-table-column>
      <!--经纬度-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.col3')"
        prop="coords"
        min-width="160px"
      />
      <!--电话号码-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.col4')"
        prop="number"
        min-width="160px"
      />
      <!--操作-->
      <el-table-column
        v-if="$store.state.is_staff"
        min-width="220px"
        :label="$t('message.home.remoteDeviceTable.col6')"
      >
        <template slot-scope="scope">
          <!--退网-->
          <el-button
            :disabled="scope.row.state === 0"
            style="padding: 5px"
            @click.stop="controlRemoteCu(scope.row, 'logout')"
            type="primary"
            size="mini"
          >
            {{ $t('message.home.remoteDeviceTable.button1') }}
          </el-button>
          <!--重新入网-->
          <el-button
            :disabled="scope.row.state === 0"
            style="padding: 5px"
            @click.stop="controlRemoteCu(scope.row, 'relogin')"
            type="primary"
            size="mini"
          >
            {{ $t('message.home.remoteDeviceTable.button2') }}
          </el-button>
          <!--建链-->
          <!--<el-button-->
          <!--  :disabled="scope.row.state === 0"-->
          <!--  style="padding: 5px"-->
          <!--  @click.stop="handleCuCallBridge(scope.row)"-->
          <!--  type="primary"-->
          <!--  size="mini"-->
          <!--&gt;-->
          <!--  {{ $t('message.home.remoteDeviceTable.button3') }}-->
          <!--</el-button>-->
          <!--拆链-->
          <!--<el-button-->
          <!--  :disabled="scope.row.state === 0"-->
          <!--  style="padding: 5px"-->
          <!--  @click.stop="handleCuCallBridgeEnd(scope.row)"-->
          <!--  type="primary"-->
          <!--  size="mini"-->
          <!--&gt;-->
          <!--  {{ $t('message.home.remoteDeviceTable.button4') }}-->
          <!--</el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CuCollection',

  props: {
    data: {
      type: Array,
      default: function () {
        return []
      }
    }
  },

  data () {
    return {
    }
  },

  methods: {
    // table的标签过滤方法
    filterTag (value, row) {
      return row.statename === value
    },
    controlRemoteCu (row, operate) {
      let self = this
      self.$store.dispatch('axios', {
        method: 'post',
        url: `/api/abs/ncp/cu_command/${row.id}/${operate}/`
      })
    }
  }
}
</script>

<style scoped>
  .empty-table-data-div{
    cursor: pointer;
    border: dashed 1px #c4c4c4;
  }
</style>
